<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通讯录管理系统</title>
    <style>
      .table-container {
        width: 960px;
        margin: 0 auto;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        min-width: 100px;
        padding: 12px 24px;
      }

      .buttons {
        margin-bottom: 12px;
      }

      #add-row {
        display: none;
      }
    </style>
  </head>
  <body>
    <h2 style="text-align: center">通讯录管理系统</h2>
    <div class="table-container">
      <div class="buttons">
        <button id="add">新增</button>
      </div>
      <table border>
        <thead>
          <th>姓名</th>
          <th>地址</th>
          <th>电话</th>
          <th>操作</th>
        </thead>
        <tbody></tbody>
        <tr id="add-row">
          <td><span>姓名:</span> <input id="name" /></td>
          <td><span>地址:</span> <input id="address" /></td>
          <td><span>电话:</span> <input id="phone" /></td>
          <td><button>确认</button></td>
        </tr>
      </table>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script>
      const BASE_URL = 'http://localhost:8000'

      const addButton = document.querySelector('#add')

      const addRow = document.querySelector('#add-row')
      const nameInput = document.querySelector('#name')
      const addressInput = document.querySelector('#address')
      const phoneInput = document.querySelector('#phone')

      addButton.addEventListener('click', () => {
        addRow.style.display = 'table-row'
      })

      addRow.querySelector('button').addEventListener('click', async () => {
        const { value: name } = nameInput
        const { value: address } = addressInput
        const { value: phone } = phoneInput

        if (name && address && phone) {
          addRow.style.display = 'none'
          nameInput.value = ''
          addressInput.value = ''
          phoneInput.value = ''
          await axios.post(`${BASE_URL}/add`, { name, address, phone })
          await queryAll()
        }
      })

      async function queryAll() {
        const tbody = document.querySelector('tbody')
        tbody.querySelectorAll('tr').forEach((el) => {
          tbody.removeChild(el)
        })

        const {
          data: { data }
        } = await axios.get(`${BASE_URL}/queryAll`)

        data.forEach((item) => {
          const { id, name, address, phone } = item

          const tr = document.createElement('tr')
          tr.innerHTML = `
          <td >${name}</td>
            <td>${address}</td>
            <td>${phone}</td>
            <td><button>删除</button></td>
          `

          tbody.appendChild(tr)
          tr.querySelector('button').addEventListener('click', async () => {
            await axios.post(`${BASE_URL}/delete`, { id })
            await queryAll()
          })
        })
      }

      queryAll()
    </script>
  </body>
</html>
